import React from 'react';
import { Editor } from '@tiptap/react';

interface FontStyleSelectProps {
  editor: Editor;
  type: 'family' | 'size';
}

const FontStyleSelect: React.FC<FontStyleSelectProps> = ({ editor, type }) => {
  const fontFamilies = [
    { value: '', label: '默认字体' },
    { value: 'Arial', label: 'Arial' },
    { value: '宋体', label: '宋体' },
    { value: '黑体', label: '黑体' },
    { value: '微软雅黑', label: '微软雅黑' },
    { value: '楷体', label: '楷体' },
    { value: 'Times New Roman', label: 'Times New Roman' },
    { value: 'Droid Serif', label: 'Droid Serif' },
    { value: 'Source Code Pro', label: 'Source Code Pro' },
  ];

  const fontSizes = [
    { value: '', label: '默认大小' },
    { value: '9px', label: '9' },
    { value: '10px', label: '10' },
    { value: '11px', label: '11' },
    { value: '12px', label: '12' },
    { value: '13px', label: '13' },
    { value: '14px', label: '14' },
    { value: '16px', label: '16' },
    { value: '18px', label: '18' },
    { value: '20px', label: '20' },
    { value: '22px', label: '22' },
    { value: '24px', label: '24' },
    { value: '30px', label: '30' },
    { value: '36px', label: '36' },
  ];

  const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    if (type === 'family') {
      editor.chain().focus().setFontFamily(e.target.value).run();
    } else {
      editor.chain().focus().setMark('textStyle', { fontSize: e.target.value }).run();
    }
  };

  const getCurrentValue = () => {
    if (type === 'family') {
      return editor.getAttributes('textStyle').fontFamily || '';
    }
    return editor.getAttributes('textStyle').fontSize || '';
  };

  const options = type === 'family' ? fontFamilies : fontSizes;

  return (
    <select
      onChange={handleChange}
      value={getCurrentValue()}
      className="toolbar-select"
    >
      {options.map((option) => (
        <option key={option.value} value={option.value}>
          {option.label}
        </option>
      ))}
    </select>
  );
};

export default FontStyleSelect;